<template>
  <div
    class="toast"
    :class="{
      success: type === 'success',
      error: type === 'error',
      warning: type === 'warning',
    }"
  >
    {{text}}
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      text: '',
      type: '',
    }
  },
}
</script>

<style>
.toast {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 1999;
  transform: translateX(-50%);
  min-width: 350px;
  padding: 15px 15px 15px 20px;
  font-size: 14px;
  background-color: #edf2fc;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  opacity: 1;
  animation: show 0.3s forwards;
}
.toast.success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67C23A;
}
.toast.error {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #F56C6C;
}
.toast.warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #E6A23C;
}

@keyframes show {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 40px;
    opacity: 1;
  }
}
</style>